<template>
	<view class="wrap">
		<view class="logo">
			<img src="../../static/petlogo.png" alt="">
		</view>
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="username" name="userPhone" label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="password" type="password" name="userPassword" label="密码" placeholder="密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					提交
				</van-button>
			</div>
		</van-form>
		<view class="bottom">
			<text @click="tologon">没有账号？，去注册</text>
		</view>
	</view>
</template>

<script setup>
	import {
		showSuccessToast,
		showFailToast
	} from 'vant'
	import $http from '../../request/index.js'
	import {
		ref
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	const store = useStore()
	let username = ref('');
	let password = ref('');

	function onSubmit(values) {
		console.log('submit', values);
		$http.post('/user/login', values).then(res => {
			console.log(res)
			let {
				code,
				data
			} = res

			if (!code) {
				store.commit('uploadUserinfo', data)
				// store.commit('uploadUserinfo', res.data)
				uni.setStorageSync('token', data.token)
				showSuccessToast('登录成功')
				store.commit('uploadLogin', true)
				setTimeout(() => {
					uni.switchTab({
						url: '../home/home'
					})
				}, 1500)
			} else {
				showFailToast(data)
			}
		})
	};

	function tologon() { //去注册
		uni.redirectTo({
			url: '/pages/logon/logon'
		})
	}
</script>

<style scoped>
	.wrap {
		width: 100vw;
		height: calc(100vh - 44px);
	}

	.bottom {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100vw;
		padding: 0 60rpx;
		box-sizing: border-box;
	}

	.bottom text {
		font-size: 24rpx;
		color: #1989fa;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		/* background-color: #efefef; */
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		padding-top: 80rpx;
	}

	.logo img {
		width: 180rpx;
		height: 180rpx;
	}

	.van-form {
		margin-top: 80rpx;
	}
</style>